<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登入 - 啄木鸟</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
    >
    <script>
        var SYS_BASE_URL_ENUM;
    </script>

    <link rel="stylesheet" th:href="${SYS_RES}+'/static/lay/layui/css/layui.min.css?v=1.4'">
    <link rel="stylesheet" th:href="${SYS_RES}+'/static/lay/style/admin.min.css?v=1.3'">
    <link rel="stylesheet" th:href="${SYS_RES}+'/static/lay/style/login.css'">

    <script th:src="${SYS_RES}+'/static/lay/layui/layui.min.js'"></script>
    <style>
        html {
            background-color: #fff;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            background: url("/static/style/images/cas/logo_20200226_6.png") no-repeat center center;
            background-size: 100% 580px;
            height: 100%;
        }
        .bg-left {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            height:580px;
            width: 498px;
            background-size: cover;
            background: url("/static/style/images/cas/logo_20200226_7.png") no-repeat center center;
        }
        .bg-right {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height:580px;
            width: 616px;
            right: 0;
            background-size: cover;
            background: url("/static/style/images/cas/logo_20200226_8.png") no-repeat center center;
        }
        /* 登陆框 */
        .login {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius: 10px;
            width: 360px;
            max-height: 440px;
            margin: auto;
            padding: 10px 50px 50px 50px;
            background-color: #fff;
            position: relative;
        }

        /* 商标 */
        .login-logo {
            width: 48px;
            height: 56px;
        }

        .login-title {
            padding-top: 1px;
            padding-bottom: 8px;
            color: #222222;
            font-size: 22px;
        }

        /* 输入框 */
        .login-input {
            box-sizing: border-box;
            display: flex;
            border: 1px solid #eee;
            border-radius: 3px;
            padding: 10px;
            margin-bottom: 20px;
            width: 100%;
        }

        .login-input > .layui-icon {
            color: #aaa;
        }

        .login-input > input {
            flex-grow: 1;
            border: none;
            margin-left: 10px;
            outline: none;
        }

        .login-btn {
            border: none;
            width: 100%;
            height: 44px;
            background-color: #ff8a8a;
            color: #fff;
            font-size: 16px;
            line-height: 36px;
        }

    </style>
</head>
<body class="page-login">
<div class="bg-left"></div>
<div class="bg-right"></div>
<form method="post" action="" class="login">
    <img src="/static/style/images/cas/logo_20200226_5.png" style="min-width:184px; max-width: 184px;margin-top: 10px;margin-bottom: 10px"
         class="logo shadow layui-col-sm5 layui-col-xs12 d-flex align-items-center justify-content-center py-5 px-4">
    <div class="login-title">钉钉扫码 安全登录</div>
    <div id="loading" style="position: relative; top: 120px; height: 0px;">

    </div>
    <div class="" id="login_container"></div>
    <!--<div class="login-input">-->
        <!--<label class="layui-icon layui-icon-username"></label>-->
        <!--<input-->
                <!--id="LAY-user-login-username"-->
                <!--name="staffName"-->
                <!--type="text" placeholder="请输入员工帐号"-->
        <!--&gt;-->
    <!--</div>-->
    <!--&lt;!&ndash;&ndash;&gt;-->
    <!--<div class="login-input">-->
        <!--<label class="layui-icon layui-icon-password"></label>-->
        <!--<input-->
                <!--id="LAY-user-login-password"-->
                <!--name="password"-->
                <!--type="password" placeholder="请输入密码"-->
        <!--&gt;-->
    <!--</div>-->
    <!--<div style="display: none" id="vercode">-->
        <!--<div class="login-input" style="width: 50%;float: left;">-->
            <!--<label class="layui-icon layui-icon-vercode"></label>-->
            <!--<input style="width: 50%;"-->
                   <!--id="LAY-user-login-vercode"-->
                   <!--name="vercode" maxlength="5"-->
                   <!--type="text" placeholder="请输入验证码"-->
            <!--&gt;-->
        <!--</div>-->
        <!--<div style="float: left;margin-left: 20px">-->
            <!--<img style="min-width:80px; max-width: 100px;" src="/captcha/gif.action" id="vercodeImage"/>-->
        <!--</div>-->
    <!--</div>-->

    <!--<button-->
            <!--lay-submit-->
            <!--lay-filter="lay-user-login-submit"-->
            <!--class="login-btn"-->
    <!--&gt;登录-->
    <!--</button>-->
</form>
<div
        class="login-container"
        style="display:none;"
>
    <div class="login-box">
        <form method="post" action="" class="layui-form">
            <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login1" style="display: none;">
                <input type="hidden" name="redirectUrl" id="redirectUrl" th:value="${redirectUrl}"/>
                <input type="hidden" name="appId" id="appId" th:value="${appId}"/>
                <input type="hidden" name="appSecret" id="appSecret" th:value="${appSecret}"/>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript" th:inline="javascript">
    document.domain = "xiujiadian.com";
    if (window != top) {
        top.location.href = location.href;
    }
</script>
<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
<script>
    var json = {};
    layui.define(['form','layer'], function(){
        let $ = layui.$;
        let layer = layui.layer;
        json = {
            appId: $("#appId").val(),
            appSecret: $("#appSecret").val(),
            redirectUrl: $("#redirectUrl").val()
        };
        let env = "[[${ZMN_URL_ENV}]]";
        var redirectUri = env + "api-open.xiujiadian.com/dingtalk/callback/get-user-id";
        var url = "http://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid="+json.appId+"&response_type=code&scope=snsapi_login&state=STATE&redirect_uri="+ redirectUri;
        var gotoUrl = encodeURIComponent(url);
        var obj = DDLogin({
            id:"login_container",
            goto: gotoUrl,
            style: "border:none;background-color:#FFFFFF;",
            width : "230",
            height: "300"
        });

        $("#loading").html();
        var ajaxUrl = '/cas/login.action';
        var handleMessage = function (event) {
            var origin = event.origin;
            if( origin == "https://login.dingtalk.com" ) { //判断是否来自ddLogin扫码事件。
                var loginTmpCode = event.data;
                //获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了
                url = url + "&loginTmpCode=" + loginTmpCode;
                var data = {};
                data.redirectUrl = json.redirectUrl;
                data.qrCodeUrl = url;
                $.ajax({
                    async: false,
                    type: "POST",
                    url: ajaxUrl,
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    dataType: "json",
                    beforeSend:function(XMLHttpRequest){
                        $("#loading").html("<i class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop' style='font-size: 50px'></i>"); //在后台返回success之前显示loading图标
                        $("#login_container").css("opacity", "0.1");
                    },
                    success: function (json_) {
                        if (json_.status == 200) {
                            console.log(json_);
                            args = json_;
                            window.location.href = json_.id;
                        } else {
                            layer.msg(json_.message);
                        }
                        return false;

                    }
                })
            }
        };

        if (typeof window.addEventListener != 'undefined') {
            window.addEventListener('message', handleMessage, false);
        } else if (typeof window.attachEvent != 'undefined') {
            window.attachEvent('onmessage', handleMessage);
        }
    })

</script>
</body>
</html>